<svelte:options immutable={true} />

<script lang="ts">
  import Time, { svelteTime } from "svelte-time";
  import { actixGraphqlEndpoint } from "$lib/js/stores";
  import { request, gql } from "graphql-request";

  import {
    useQuery,
    useMutation,
    useQueryClient,
  } from "@sveltestack/svelte-query";

  import type { TaskType } from "$lib/ebm";

  export let task: TaskType;
  export let index = 0;
  let correct = "";
  let answer = "";

  const queryClient = useQueryClient();

  let endpoint = $actixGraphqlEndpoint;
  const mutation = useMutation<
    TaskType,
    { message: string },
    {
      task_id: string;
      std_answer: string;
      answer_: string;
      seconds_: number;
    }
  >(
    async ({ task_id, std_answer, answer_, seconds_ }) => {
      const { task } = await request(
        endpoint,
        gql`
          mutation (
            $taskId: ID!
            $stdAnswer: String!
            $answer: String!
            $seconds: Int
          ) {
            task: answerTaskQuizitem(
              input: {
                taskId: $taskId
                stdAnswer: $stdAnswer
                answer: $answer
                seconds: $seconds
              }
            ) {
              id
              createdAt
              updatedAt
              status
              from
            }
          }
        `,
        {
          taskId: task_id,
          stdAnswer: std_answer,
          answer: answer_,
          seconds: seconds_,
        }
      );
      return task;
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries("taskcounts");
      },
    }
  );
</script>

{#if task.quizItem.master}
  <div class="w-full bg-gray-50 rounded-md border-2 text-black pt-4">
    <div class="text-lg mb-2 p-2 ">{task.quizItem.master.title}</div>
    <div class="text-lg p-2">{@html task.quizItem.master.description}</div>
  </div>
{/if}
<div class="w-full flex flex-col sm:flex-row h-auto pb-2">
  <div
    class="relative sm:w-1/3 text-black  sm:h-full 
    bg-blue-300 py-3 rounded-md border-2"
  >
    <div class=" w-full h-full flex-row m-2">
      <div class="float-left sm:float-right px-2 mr-2 sm:mr-2  text-black">
        <span
          class="px-2 m-1 rounded-full bg-gray-500 
          text-sm text-gray-100 h-6 w-18 my-auto"
        >
          {index + 1}:遗忘{task.ebpForgetproba}%
        </span>
        <span class="relative text-left text-lg font-bold m-1">
          {task.quizItem.title}
        </span>
      </div>
      <div class="pl-2 text-white">
        {@html task.quizItem.description} 
      </div>
    </div>
    <div
      class="absolute top-1 right-1 w-18 h-3 bg-purple-200 text-sm rounded-full flex justify-center items-center text-center p-2"
    >
      难度{task.ebpDifficulty} 
    </div>
  </div>

  <div class="sm:w-2/3 flex flex-col sm:flex-row sm:h-auto">
    {#if task.quizItem.opstype == "CLOZE"}
      <div
        id={task.id}
        class="flex h-20 checked:bg-red-600 sm:my-0 text-base rounded-md border-2 p-3"
      >
        <span class="flex-none pr-4 font-bold text-center">
          Input <br />Answer:
        </span>
        <input
          class="flex-2 h-12"
          name="aaaaaaa"
          placeholder=" Input answer ..."
        />
      </div>
    {:else}
      {#each task.quizItem.options as option}
        <div
          id={task.id}
          class="relative flex-1 h-full checked:bg-red-600 mt-2 sm:my-0 text-base rounded-md border-2 
        hover:border-gray-500 border-gray-300 px-6 py-3 
        {correct === ''
            ? 'bg-gray-50 cursor-pointer'
            : 'bg-gray-200 cursor-not-allowed'}"
          data-option="a"
          on:click={() => {
            if (correct === "") {
              correct = "false";
              answer = option.k;
              if (task.quizItem.stdAnswer == answer) {
                correct = "true";
              }
              console.log("answer=", answer);
              $mutation.mutate({
                task_id: task.id,
                std_answer: task.quizItem.stdAnswer,
                answer_: answer,
                seconds_: 3,
              });
            }
          }}
        >
          {option.k}: {option.v}
          {#if correct === "true" && option.k === answer}
            <i
              class="absolute top-0 right-1 fa-regular fa-circle-check text-green-800 text-xl bg-opacity-100"
            />
          {:else if correct === "false" && option.k === answer}
            <i
              class="absolute top-0 right-1 fa-regular fa-circle-xmark text-red-800 text-xl bg-opacity-100"
            />
          {:else if correct === "false" && option.k === task.quizItem.stdAnswer}
            <i
              class="absolute top-0 right-1 fa-regular fa-circle-check text-green-800 text-xl bg-opacity-100"
            />
          {/if}
        </div>
      {/each}
    {/if}
  </div>
</div>
